<template>
	<view class="container">
		<view class="avatar-box" @click="toMy">
			<image src="/static/logo.png"></image>
		</view>
		<view class="img-box">
			<view class="img-item" v-for="(item, index) in 10" :key="index" @click="clickItem(index)">
				<image class="beach-img" :src="('/static/beach-img-'+ item +'.png')"></image>
				<image class="txt-img" :src="('/static/beach-txt-'+ item +'.png')"></image>
			</view>
		</view>

		<!-- 弹窗 -->
		<beach-info v-if="showMask" @hideShow="hideShow"></beach-info>

		<tab-bar :curIndex="3"></tab-bar>
	</view>
</template>

<script>
	import TabBar from '@/pages/components/tab-bar/index.vue'
	import beachInfo from '../beach/beach-info/index.vue';
	export default {
		components:{
			TabBar,
			beachInfo
		},
		data() {
			return {
				showMask:false
			}
		},
		methods: {
			clickShowDailog(){
				this.showMask = true
			},
			hideShow(){
				this.showMask = false
			},
			toMy() {
				uni.navigateTo({
					url: '/pages/my/my'
				})
			},
			clickItem(index) {
				if (index == 5) { // 科技馆
					uni.navigateTo({
						url: '/pages/my/shop-mall/shopmall'
					})
				} else if (index == 8) { // ATM
					uni.navigateTo({
						url: '/pages/my/wallet/wallet'
					})
				} else {
					this.clickShowDailog()
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	.container {
		min-height: 100vh;
		background: url('/static/beach-bg.jpg') top center no-repeat;
		background-size: 100%;
		padding-top: 30rpx;

		.avatar-box {
			padding: 0 42rpx;
			display: flex;
			justify-content: flex-end;

			image {
				width: 92rpx;
				height: 92rpx;
				border-radius: 50%;
			}
		}

		.img-item {
			position: absolute;
			width: 136rpx;
			height: 136rpx;
			animation: houseFloat 4s ease-in-out infinite alternate;

			.beach-img {
				width: 136rpx;
				height: 136rpx;
			}

			.txt-img {
				width: 150rpx;
				height: 45rpx;
				position: absolute;
				left: -8rpx;
				bottom: 0;
				z-index: 1;
			}

			&:nth-child(1) {
				top: 156rpx;
				left: 142rpx;
			}

			&:nth-child(2) {
				top: 230rpx;
				right: 58rpx;
			}

			&:nth-child(3) {
				top: 416rpx;
				left: 226rpx;
			}

			&:nth-child(4) {
				top: 588rpx;
				right: 150rpx;
			}

			&:nth-child(5) {
				top: 618rpx;
				left: 54rpx;
			}

			&:nth-child(6) {
				top: 789rpx;
				left: 198rpx;
			}

			&:nth-child(7) {
				top: 868rpx;
				right: 58rpx;
			}

			&:nth-child(8) {
				top: 988rpx;
				left: 92rpx;
			}

			&:nth-child(9) {
				top: 1206rpx;
				right: 70rpx;
			}

			&:nth-child(10) {
				bottom: 230rpx;
				left: 54rpx;
			}
		}
	}

	// 房屋上下浮动动画
	@keyframes houseFloat {
		0% {
			transform: translateY(0);
		}

		100% {
			transform: translateY(-5rpx);
		}
	}
</style>